<template>
  <div  >
    <div  v-for="(item,index) in value" :key="item.no" style="padding:3px">
      <el-input 
        v-model="item.attr"
        placeholder="属性名称"
        clearable
        style="width:30%;padding-right:10px"
       
      />
      <el-select
          v-model="item.opera"
          placeholder="运算符"
          clearable
          style="width:15%;padding-right:10px"
      >
        <el-option
          v-for="item in opera"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-input
          v-model="item.val"
          placeholder="值"
          clearable
         style="width:30%;padding-right:10px"
        
      />
      <el-button icon="el-icon-minus" size="mini" @click="remove(index)" ></el-button>
    </div>
    <el-button icon="el-icon-plus" size="mini" @click="add"></el-button>
    
  </div>
</template>

<script>


export default {
  props: {
    value: [String, Object, Array],
    
    
  },
  data() {
    return {
      number:1,
      opera:['>','=','<']

    };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {

        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  methods: {
    add(){
      let newkey = ++this.number
      this.value.push({
          no:newkey,
          attr:'',
          opera:'',
          val:''
      })
    },
    remove(i){
      console.log('index::', i)
      this.value.splice(i,1)
    }
  }
};
</script>



